
import { Button, DatePicker, DatePickerRef, Form, Input, Popup, Selector, Slider, Stepper } from 'antd-mobile'
import { ContentOutline, SearchOutline } from 'antd-mobile-icons'
import { RefObject, useState } from 'react'
import styles from './workcountfc.module.less'
import dayjs from 'dayjs'
import { PageModel } from '@/models/PageModel'

export default (title: string, mode: 'all' | 'mine', pagemodel: PageModel, onSearchChange: (param: PageModel) => void) => {

    const [visible1, setVisible1] = useState(false)
    const [initFormValue, setInitFormValue] = useState({
        ...pagemodel
    })

    const showConditionPopup = () => {
        setVisible1(true)
    }

    const onFinish = (formValues: PageModel) => {
        setVisible1(false)
        onSearchChange(formValues)
    }

    return (
        <>
            <div className={styles.header}>
                <div className={styles.titlearea}>
                    <ContentOutline />
                    <span className={styles.headertitle}>{title}</span>
                </div>
                <Button onClick={showConditionPopup} color='primary' size='mini' fill='none'>
                    <SearchOutline />
                </Button>
            </div>
            <Popup
                visible={visible1}
                position='left'
                onMaskClick={() => {
                    setVisible1(false)
                }}
                bodyStyle={{ height: '100vh', width: '80vw' }}
            >
                <Form
                    name='form'
                    onFinish={onFinish}
                    initialValues={initFormValue}
                    footer={
                        <Button block type='submit' color='primary'>
                            确定
                        </Button>
                    }
                >
                    <Form.Header>按条件查询</Form.Header>
                    <Form.Item name='keywords' label='关键字' >
                        <Input placeholder='请输入关键字' disabled={mode != 'all'} />
                    </Form.Item>

                    <Form.Item name='groupby' label='汇总方式'>
                        <Selector
                            columns={3}
                            options={[
                                { label: '按月', value: 'YYYY-MM' },
                                { label: '按天', value: 'YYYY-MM-DD' },
                                { label: '按年', value: 'YYYY' },
                            ]}
                        />
                    </Form.Item>

                    <Form.Item
                        name='date1'
                        label='开始日期'
                        trigger='onConfirm'
                        onClick={(e, datePickerRef: RefObject<DatePickerRef>) => {
                            datePickerRef.current?.open()
                        }}
                        rules={[{ required: true }]}
                    >
                        <DatePicker>
                            {value =>
                                value ? dayjs(value).format('YYYY-MM-DD') : '请选择日期'
                            }
                        </DatePicker>
                    </Form.Item>

                    <Form.Item
                        name='date2'
                        label='结束日期'
                        trigger='onConfirm'
                        onClick={(e, datePickerRef: RefObject<DatePickerRef>) => {
                            datePickerRef.current?.open()
                        }}
                        rules={[{ required: true }]}
                    >
                        <DatePicker>
                            {value =>
                                value ? dayjs(value).format('YYYY-MM-DD') : '请选择日期'
                            }
                        </DatePicker>
                    </Form.Item>
                </Form>
            </Popup>
        </>
    )
}